<template>
	<w-app-page class="bill-list">
		<fx-header title="点单">
<!--			<template v-slot:header-center>-->
<!--				<w-search-bar v-model:searchKey="searchKey" placeholder="搜索"></w-search-bar>-->
<!--			</template>-->
		</fx-header>
		<w-app-container direction="row" class="bill-list__content">
			<div style="display: flex; flex-direction: column;height: 100%">
				<fx-order-list-state-tabs
					v-model:tabActive="typeTabActive"
					:tabsList="typeTabList"
					@click="onTypeItemClick"
				></fx-order-list-state-tabs>
				<div style="display: flex;height: 30%;flex-direction: column;">
					<div class="clear-order" @click="onClearOrderClick">
						<DeleteTwoTone two-tone-color="#ff7875" style="font-size: 40px;" />
						<div>清空购物车</div>
					</div>
					<div class="pay-order" @click="onPayOrderClick">
						<ShoppingTwoTone two-tone-color="#52c41a" style="font-size: 40px;"/>
						<div>下单结算</div>
					</div>
				</div>
			</div>
			<w-app-container v-if="isProduct" class="bill-list__container">
				<fx-order-list-top>
					<a-tabs v-model:activeKey="activeKey" @tab-click="handleTabClick">
						<a-tab-pane v-for="item in productTypeList" :key="item.value" :tab="item.label"></a-tab-pane>
					</a-tabs>
				</fx-order-list-top>
				<w-scroll-load-list
					ref="scrollLoadListRef"
					v-model:loading="loading"
					v-model:error="error"
					:finish="finish"
					:isEmpty="!productList.length"
					:immediateCheck="false"
					class="container__list-wrap"
				>
					<div class="list-block" v-for="item in productList" :key="item.id">
						<div class="list-block__row card">
							<img :src="item.productPicPath" alt="Base Image" />
							<img v-show="item.productStock === 0" src="@/assets/images/saleoff.png" style="position: absolute; top: 0; left: 0;" alt="Overlay Image" />
						</div>
						<div class="list-block__row is-between">
							<div class="list-block__item-amount"><span class="fx-weight-border-font fx-ellipsis">{{item.productName}}</span></div>
							<div class="list-block__item-amount">库存：<span :class="['list-block__item-sysBillCode','fx-ellipsis']">{{item.productStock}}</span></div>
						</div>
						<div class="list-block__row is-between step">
							<div class="list-block__item-amount"><span class="fx-weight-border-font fx-ellipsis">{{item.productSellingPrice }}(元)</span></div>
							<div class="list-block__item-amount">
								<!-- <a-input-number v-model:value="item.orderNum" :min="0" :max="item.productStock" :step="1" :precision="0" /> -->
								<w-stepper
									v-model:value="item.orderNum"
									:max="item.productStock"
									:min="0"
									:step="1"
									integer
								></w-stepper>
							</div>
						</div>
					</div>
				</w-scroll-load-list>
			</w-app-container>
			<w-app-container v-else class="bill-list__container">
				<fx-order-list-top>
					<a-tabs stretch>
						<a-tab-pane style="min-width: 200px;" :key="0" tab="全部"></a-tab-pane>
					</a-tabs>
				</fx-order-list-top>
				<w-scroll-load-list
					ref="scrollLoadListRef"
					v-model:loading="loading"
					v-model:error="error"
					:finish="finish"
					:isEmpty="!productList.length"
					:immediateCheck="false"
					class="container__list-wrap"
				>
					<div class="list-block" v-for="item in packageList" :key="item.id">
						<div class="list-block__row card">
							<img :src="item.packagePicPath" alt="Base Image" />
							<img v-show="item.packageNum === 0" src="@/assets/images/saleoff.png" style="position: absolute; top: 0; left: 0;" alt="Overlay Image" />
						</div>
						<div class="list-block__row is-between">
							<div class="list-block__item-amount"><span class="fx-weight-border-font fx-ellipsis">{{item.packageName}}</span></div>
							<div class="list-block__item-amount">库存：<span :class="['list-block__item-sysBillCode','fx-ellipsis']">{{item.packageNum}}</span></div>
						</div>
						<div class="list-block__row is-between step">
							<div class="list-block__item-amount"><span class="fx-weight-border-font fx-ellipsis">{{item.packageSellingPrice }}(元)</span></div>
							<div class="list-block__item-amount">
								<a-input-number v-model:value="item.orderNum" :min="0" :max="item.packageNum" :step="1" :precision="0" />
							</div>
						</div>
					</div>
				</w-scroll-load-list>
			</w-app-container>
			<fx-order-list-footer-btn
				btnText="历史订单"
				@click="onHistoryOrderClick"
			></fx-order-list-footer-btn>
		</w-app-container>
	</w-app-page>
</template>
<script>
import { defineComponent, ref, computed, onMounted } from 'vue'
import { DeleteTwoTone, ShoppingTwoTone } from '@ant-design/icons-vue'
import { getFxInstance } from '@/js/instance'
import { useRoute, useRouter } from 'vue-router'
import {
	getPackageList, listCounterOrderFlowDetail, addCounterOrderFlowDetail, getProductList, getProductTypeList, clearShoppingCar
} from '@/js/api/bar.js'
export default defineComponent({
	name: 'orderList',
	components: {
		DeleteTwoTone,
		ShoppingTwoTone
	},
	setup () {
		const route = useRoute()
		const router = useRouter()
		const routeQuery = route.query
		const fxInstance = getFxInstance()
		const searchKey = ref('')

		const loading = ref(false)
		const finish = ref(false)
		const error = ref(false)
		const activeKey = ref('0')

		const productList = ref([])
		const allProductList = ref([])
		const packageList = ref([])
		const productTypeList = ref([])
		const typeTabActive = ref('product')

		const typeTabList = ref([
			{
				id: 'product',
				type: 'product',
				label: '单品',
				icon: 'stateUnsubmit',
				iconActive: 'stateUnsubmitActive',
				billState: [
					0
				]
			},
			{
				id: 'package',
				type: 'package',
				label: '套餐',
				icon: 'stateUncheck',
				iconActive: 'stateUncheckActive',
				billState: [
					1
				]
			}
		])
		const handleTabClick = (val) => {
			productList.value = val === '0' ? allProductList.value : allProductList.value.filter(item => item.productTypeId === val)
		}
		const onTypeItemClick = (item) => {
			typeTabActive.value = item.id
		}
		const isProduct = computed(() => {
			return typeTabActive.value === 'product'
		})
		const getProductData = () => {
			return getProductList().then((res) => {
				allProductList.value = res.data
				productList.value = allProductList.value
			})
		}
		const getPackageData = () => {
			return getPackageList().then((res) => {
				packageList.value = res.data
			})
		}
		const getProductTypeData = () => {
			loading.value = true
			return getProductTypeList().then((res) => {
				productTypeList.value = [
					{
						name: '全部',
						label: '全部',
						value: '0'
					},
					...res.data
				]
			})
		}
		const onClearOrderClick = () => {
			fxInstance.$fxMessageBox.confirm('是否确认清空购物车?').then(() => {
				clearShoppingCar(routeQuery).then(res => {
					if (res.code === 200) {
						fxInstance.$fxMessage.success('清空购物车成功')
						getDataList()
					}
				})
			})
		}
		const onPayOrderClick = () => {
			if (!routeQuery.counterDetailId) {
				fxInstance.$fxMessage.warning('未获取到卡台编号，请从卡台点单页面进入')
			}
			const products = allProductList.value.filter(item => item.orderNum > 0).map(item => {
				delete item.createTime
				return {
					...item,
					...routeQuery,
					orderFlowDetailStatus: 1,
					relaId: item.id,
					unitPrice: item.productSellingPrice,
					totalPrice: item.productSellingPrice * item.orderNum
				}
			})
			const packages = packageList.value.filter(item => item.orderNum > 0).map(item => {
				return {
					...item,
					...routeQuery,
					orderFlowDetailStatus: 1,
					relaId: item.id,
					unitPrice: item.packageSellingPrice,
					totalPrice: item.packageSellingPrice * item.orderNum
				}
			})
			const params = [...products, ...packages]
			if (params.length === 0) {
				return fxInstance.$fxMessage.warning('请选择商品')
			}
			addCounterOrderFlowDetail({ counterOrderFlowDetailList: params }).then((res) => {
				if (res.code === 200) {
					fxInstance.$fxMessage.success('下单成功')
					router.push({
						path: '/orderDetail',
						query: routeQuery
					})
				}
			})
		}
		const getDataList = () => {
			return Promise.all([
				getProductData(),
				getPackageData(),
				getProductTypeData()
			]).then(() => {
				loading.value = false
				finish.value = true
				listCounterOrderFlowDetail({
					...routeQuery,
					orderFlowDetailStatus: 1
				}).then(res => {
					productList.value.forEach(item => {
						const orderFlowProduct = res.data.find(detail => detail.relaId === item.id && detail.relaType === 1)
						if (orderFlowProduct) {
							item.orderNum = orderFlowProduct.orderNum
						} else {
							item.orderNum = 0
						}
					})
					packageList.value.forEach(item => {
						const orderFlowPackage = res.data.find(detail => detail.relaId === item.id && detail.relaType === 2)
						if (orderFlowPackage) {
							item.orderNum = orderFlowPackage.orderNum
						} else {
							item.orderNum = 0
						}
					})
				})
			})
		}
		const onHistoryOrderClick = () => {
			router.push({
				path: '/historyOrder',
				query: routeQuery
			})
		}
		onMounted(() => {
			getProductTypeData()
			getDataList()
		})

		return {
			searchKey,
			activeKey,
			loading,
			finish,
			error,
			typeTabActive,
			isProduct,
			typeTabList,
			handleTabClick,
			onTypeItemClick,
			productList,
			allProductList,
			packageList,
			getProductTypeData,
			productTypeList,
			onClearOrderClick,
			onPayOrderClick,
			onHistoryOrderClick
		}
	}
})
</script>
<style lang="scss" scoped>
@import "$assets/stylus/varsty";
.bill-list {
	&__content {
		justify-content: space-between;
		align-items: center;
		width: 100%;
		.state-tabs{
			height: 70%;
		}
		.clear-order,.pay-order {
			margin: 5px;
			padding-top: 15px;
			height: 100%;
			font-weight: 900;
			border: 2px solid;
			border-radius: 10px;
			text-align: center;
			color: #5d91fb;
		}
	}
	&__container {
		height: 100%;
		background-color: $fxGray14;
		.list-title {
			display: flex;
			align-items: center;
			margin-left: 20px;
			width: 200px;
			.bill-list__select-all {
				margin-left: 20px;
			}
			&-all {
				margin-left: 0;
			}
		}
		.show-line {
			&::after {
				content: "";
				position: absolute;
				right: -10px;
				width: 1px;
				height: 25px;
				background-color: $fxGray4;
			}
		}
		.in-organ-select, .out-organ-select, .check-accept-select {
			margin-left: 20px;
			width: 80px;
			:deep(.wind-select__cell) {
				width: 100%;
				.cell-text {
					color: #000000 !important;
				}
			}
			&.has-select {
				:deep(.wind-select__cell) {
					.cell-text {
						color: $fxDefaultColor !important;
					}
				}
			}
		}
		.container__list-wrap {
			padding-top: 10px;
		}
	}
	:deep(.ant-tabs){
		overflow: auto !important;
		width: 100% !important;
	}
	:deep(.ant-tabs-top > .ant-tabs-nav){
		margin: 0;
		padding: 0 8px;
	}
	:deep(.ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap){
		overflow: auto;
	}
	.list-block {
		margin: 10px 0;
		margin-left: 14px;
		padding-top: 5px;
		width: 255px;
		height: 210px;
		font-size: 15px;
		border-radius: 5px;
		background-color: $fxWhite;
		.list-block__row.card {
			height: 140px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.list-block__row {
			position: relative;
			display: flex;
			align-items: center;
			padding: 0 10px;
			width: 100%;
			.list-block__checkbox {
				margin-right: 10px;
			}
			.list-block__sysBillCode {
				flex: 1;
				font-size:14px;
				&-color {
					color: $fxGray12;
				}
			}
			.list-block__bill-state {
				margin: 0 5px;
			}
			.list-block__organ {
				max-width: 60%;
			}
			.list-block__other-organ {
				max-width: 40%;
				color: $fxGray12;
			}
			.list-block__organ-border {
				margin: 0 10px;
				color: $fxGray12;
			}
			.list-block__item-amount {
				display: flex;
				align-items: center;
			}
			.list-block__item-sysBillCode {
				color: $fxGray12;
			}
			.list-block__bill-house-icon {
				margin-right: 5px;
				width: 20px;
				height: 20px;
			}
			.list-block__bill-house {
				flex: 1;
				margin-right: 5px;
			}
			.list-block__bill-type {
				margin-right: 10px;
				width: 60px;
				&-color {
					color: $fxGray12;
				}
			}
			.list-block__modify-man {
				width: 80px;
				text-align: right;
				color: $fxGray12;
			}
			.list-block__modify-date {
				width: 90px;
				text-align: right;
				color: $fxGray12;
			}
			&.is-bottom {
				font-size: 14px;
				&::before {
					content: "";
					position:absolute;
					top: 0;
					width: 370px;
					height: 1px;
					background-color: $fxGray13;
				}
			}
			&.is-between {
				justify-content: space-between;
			}
			&.is-between.step {
				height: 35px;
			}
		}
	}
}
</style>
